<template>
	<view class="columnbox wdh-100 content">
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">姓名</view>
				<input placeholder-class="reg-pl" class="info-input" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">身份证</view>
				<input @blur="sfzInput" placeholder-class="reg-pl" class="info-input" v-model="cardid"
					placeholder="请输入身份证号" />
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">性别</view>
				<radio-group v-model="sex">
					<radio @click="sex='1'" color="#00b6b2" style="transform: scale(.7);margin-right: 40rpx;"
						:checked="sex=='1'" value="1">
						<view style="transform: scale(1.5);margin-left: 20rpx;">男</view>
					</radio>
					<radio @click="sex='2'" color="#00b6b2" style="transform: scale(.7);" :checked="sex=='2'" value="2">
						<view style="transform: scale(1.5);margin-left: 20rpx;">女</view>
					</radio>
				</radio-group>
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">出生日期</view>
				<picker mode="date" @change="handleChange">
					<view v-if="shengri==''" class="reg-pl">请选择生日</view>
					<view v-else>{{shengri}}</view>
				</picker>
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">城市</view>
				<picker mode="region" @change="chooseRegion">
					<view v-if="province==''" class="reg-pl">请选择城市</view>
					<view v-else>{{province}}{{city}}{{county}}</view>
				</picker>
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">手机号</view>
				<input type="number" maxlength="11" placeholder-class="reg-pl" v-model="phone" class="info-input"
					placeholder="请输入手机号" />
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">验证码</view>
				<view class="rowbox spb code-box">
					<input type="number" placeholder-class="reg-pl" v-model="phonecode" class="code-input"
						placeholder="请输入验证码" />
					<view v-if="!codeflag" @click="getCode" class="rowbox def-col code-btn">获取验证码</view>
					<view class="rowbox def-col code-btn" v-else>{{codenum}}s</view>
				</view>
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">密码</view>
				<input placeholder-class="reg-pl" v-model="pwd" class="info-input" placeholder="请输入密码" />
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">擅长科室</view>
				<view class="rowbox spb code-box" @click="chooseKeshi">
					<!-- <picker class="wdh-100" @change="handleKeshiChange" mode="selector" :range="keshiList"
						range-key="name">
						<view v-if="keshi==''" class="reg-pl">请选择科室</view>
						<view v-else class="wdh-100 textovflow">{{keshi.name}}</view>
					</picker> -->
					<view v-if="keshi==''" class="reg-pl">请选择科室</view>
					<view v-else class="wdh-100 textovflow">{{keshi.name}}</view>
				</view>
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">第一执业机构</view>
				<view class="rowbox spb code-box" @click="jigouflag=true">
					<view v-if="jigou==''" class="reg-pl">请选择机构</view>
					<view v-else class="wdh-100 textovflow">{{jigou.name}}</view>
				</view>
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">职称</view>
				<picker class="code-box" @change="zhicheng=$event.detail.value" mode="selector" :range="zhiChengnList"
					range-key="name">
					<view class="code-box rowbox spb" style="width: 500rpx;">
						<view>{{zhiChengnList[zhicheng].name}}</view>
						<view>
							<u-icon name="arrow-right" size="28rpx"></u-icon>
						</view>
					</view>
				</picker>
				<!-- <radio-group v-model="zhicheng">
					<radio @click="zhicheng='主治医师'" color="#00b6b2" style="transform: scale(.7);margin-right: 40rpx;"
						:checked="zhicheng=='主治医师'" value="主治医师">
						<view style="transform: scale(1.5);margin-left: 20rpx;">主治医师</view>
					</radio>
					<radio @click="zhicheng='主任医师'" color="#00b6b2" style="transform: scale(.7);"
						:checked="zhicheng=='主任医师'" value="主任医师">
						<view style="transform: scale(1.5);margin-left: 20rpx;">主任医师</view>
					</radio>
				</radio-group> -->
			</view>
			<view class="rowbox one-info jus als" @click="addScjb">
				<view class="info-title">擅长治疗疾病</view>
				<view class="jb-list">
					<view v-if="curtagList.length==''" class="reg-pl">请选择</view>
					<view class="rowbox sel-tag" v-for="(item,index) in curtagList" :key='index'>
						{{item.name}}
					</view>
					<!--                  <view class="wdh-100 scjb-list" style="width: calc(100% - 100rpx);">
                        <view class="reg-pl" v-if="curtagList.length==0" @click="addScjb">请选择</view>
                        <view class="rowbox sel-tag" v-for="(item,index) in curtagList" :key='index'>
                            {{item.name}}
                        </view>
                    </view>
                    <view class="rowbox def-col code-btn" @click="addScjb">编辑</view> -->
				</view>
			</view>
			<view class="rowbox one-info jus">
				<view class="info-title">一句话简介</view>
				<input placeholder-class="reg-pl" v-model="title" class="info-input" placeholder="请输入一句话简介" />
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus als">
				<view class="info-title">详细介绍</view>
				<textarea placeholder-class="reg-pl" class="info-input" v-model="content"
					placeholder="请输入详细介绍"></textarea>
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">头像</view>
				<image v-if="logo==''" @click="addTx" src="/static/img/addimg.png" mode="aspectFill" class="add-img">
				</image>
				<image v-else @click="addTx" :src="logo" mode="aspectFill" class="add-img"></image>
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="rowbox one-info jus">
				<view class="info-title">签名</view>
				<view class="rowbox spb code-box">
					<view v-if="signature!=''" class="reg-pl">已添加</view>
					<view @click="toSignature" class="rowbox def-col code-btn">{{signature==''?'添加签名':'修改签名'}}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 270rpx;"></view>
		<view class="columnbox wdh-100 bottom-box">
			<view v-if="submitflag" class="rowbox wdh-100 send-btn grey-btn" @click="">完成</view>
			<view v-else class="rowbox wdh-100 send-btn" @click="checkAgree">完成</view>
			<label class="wdh-100 radio-box rowbox" @click="agreeflag=!agreeflag">
				<radio color="#00ab47" style="transform: scale(0.7);" value="r1" :checked="agreeflag" />
				我已阅读并同意
				<text class="def-col" @click.stop="showDocument(1)">《用户协议》</text>
				<text class="def-col">、</text>
				<text class="def-col" @click.stop="showDocument(2)">《隐私协议》</text>
			</label>

		</view>

		<!-- 选择标签 -->
		<u-popup mode="bottom" :show='tagflag' @close="tagflag=false" round="20rpx" closeable>
			<scroll-view scroll-y class="wdh-100 tag-list">
				<view class="rowbox tag-title">编辑擅长</view>
				<view class="q-title columnbox als">
					<view>选择擅长治疗疾病<text>（最多选择20个）</text></view>
					<view class="q-line"></view>
				</view>
				<view class="wdh-100 sel-tag-list">
					<view @click="deletTag(item,index)" class="rowbox sel-tag" v-if="item.select"
						v-for="(item,index) in seltagList.List" :key='index'>
						<u-icon name="close" size="24rpx"></u-icon>
						{{item.name}}
					</view>
				</view>
				<view class="q-title">{{seltagList.name}}</view>
				<view class="wdh-100 tag-list-box">
					<view @click="chooseTag(item,index)" class="rowbox one-tag" v-if="!item.select"
						v-for="(item,index) in seltagList.List" :key='index'>
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 选择机构 -->
		<u-popup mode="bottom" :show="jigouflag" @close="jigouflag=false" round="20rpx" closeable>
			<scroll-view @scrolltolower="loadJiGou" scroll-y class="wdh-100 tag-list">
				<view class="rowbox tag-title">选择机构</view>
				<view class="rowbox wdh-100 search-box">
					<view class="rowbox search-info spb">
						<view class="rowbox">
							<u-icon name="search" size="40rpx"></u-icon>
							<input confirm-type="search" @confirm="searchJigou" v-model="jigouname"
								placeholder="搜索机构" />
						</view>
						<view class="rowbox search-btn" @click="searchJigou">搜索</view>
					</view>
				</view>
				<view @click="chooseJigou(item)" v-for="(item,index) in jigouList" :key='index'
					class="rowbox one-jigou jus">
					<image class="jg-img" :src="item.logo" mode="aspectFill"></image>
					<view class="columnbox als">
						<view class="jg-name">{{item.name}}</view>
						<view class="jg-area">{{item.area}}</view>
					</view>
				</view>
				<view class="rowbox no-search" @click="addJiGou">
					找不到您的医院，<view class="def-col">添加医院</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreeflag: false,
				name: '',
				cardid: '',
				sex: '1',
				shengri: '',
				phone: '',
				phonecode: '',
				pwd: '',
				keshi: '',
				jigou: '',
				sljb: [],
				title: '',
				content: '',
				logo: '',
				license: [],
				province: '',
				city: '',
				county: '',
				// 验证码
				codeflag: false,
				codeinterval: null,
				codenum: 60,
				keshiList: [], //科室列表
				jigouList: [], //机构列表
				tagList: [], //标签列表
				tagflag: false, //选择标签弹窗
				seltagList: [], //可选择的标签列表
				curtagList: [], //选择的标签
				jigouflag: false, //选择机构弹窗
				pageNo: 1,
				jigouname: '',
				jigoutotal: 0,
				jigousearch: false, //搜索机构
				zsList: [], //证书列表
				submitflag: false,
				signature: '',
				zhicheng: 0,
				zhiChengnList: [], //职称列表
				kefu: ''
			};
		},
		onLoad(options) {
			if (options.kefu) {
				this.kefu = options.kefu
			}
			// this.getKeShi()
			this.getJiGou()
			this.getZhiCheng()
			// this.getTag()
		},
		methods: {
			showDocument(type) {
				uni.navigateTo({
					url: '/packageA/document/document?type=' + type
				})
			},
			getZhiCheng() {
				this.$req.post('/doctor/zhichengs').then(res => {
					this.zhiChengnList = res.data.data
				})
			},
			addJiGou() {
				this.jigouflag = false
				this.jigouname = ''
				uni.navigateTo({
					url: '/packageA/reg/addJigou'
				})
			},
			sfzInput() {
				if (this.cardid.length == 18) {
					let sr = this.cardid.substring(6, 14)
					this.shengri = sr.substring(0, 4) + '-' + sr.substring(4, 6) + '-' +
						sr.substring(6, 8)
					console.log(this.shengri)
				}
			},
			toSignature() {
				uni.navigateTo({
					url: '/pages/signature/signature?from=reg'
				})
			},
			//选择科室
			chooseKeshi() {
				uni.navigateTo({
					url: '/packageA/reg/keshi'
				})
			},
			checkAgree() {
				if (!this.agreeflag) {
					uni.showModal({
						title: '是否阅读并同意协议？',
						success: (res) => {
							if (res.confirm) {
								this.agreeflag = true
								this.submitInfo()
							} else {
								return
							}
						}
					})
				}
				else{
					this.submitInfo()
				}
			},
			async submitInfo() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				} else if (this.cardid == '') {
					uni.showToast({
						title: '请输入身份证',
						icon: 'none'
					})
				} else if (this.shengri == '') {
					uni.showToast({
						title: '请选择生日',
						icon: 'none'
					})
				} else if (this.province == '') {
					uni.showToast({
						title: '请选择城市',
						icon: 'none'
					})
				} else if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else if (this.phonecode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else if (this.pwd == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				} else if (this.keshi == '') {
					uni.showToast({
						title: '请选择科室',
						icon: 'none'
					})
				} else if (this.jigou == '') {
					uni.showToast({
						title: '请选择第一执业机构',
						icon: 'none'
					})
				} else if (this.logo == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
				} else if (this.signature == '') {
					uni.showToast({
						title: '请添加签名',
						icon: 'none'
					})
				} else {
					if (!this.submitflag) {
						this.submitflag = true
						uni.requestSubscribeMessage({
							tmplIds: [
								'hVIEEZdXsgTUQ1ItrZYrg85AHalPl6crHNDLZLXgWBs'
							],
							success(res) {

							},
							fail(errMessage) {
								console.log("订阅消息 失败 ", errMessage);
							},
							complete: errMessage => {

							}
						})
						uni.showLoading({
							title: '正在提交',
							mask: true
						})
						let logo = await this.sendImg(this.logo)
						let licenselist = []
						for (var i = 0; i < this.license.length; i++) {
							licenselist.push(await this.sendImg(this.license[i]))
						}
						let sljb = []
						if (this.curtagList.length > 0) {
							this.curtagList.forEach(v => {
								sljb.push(v.id)
							})
						}

						this.$req.post('/doctor/doctorregister', {
							zhicheng: this.zhiChengnList[this.zhicheng].name,
							phone: this.phone,
							phonecode: this.phonecode,
							pwd: this.pwd,
							name: this.name,
							logo: logo,
							keshi: this.keshi.name,
							keshiid: this.keshi.id,
							jigou: this.jigou.name,
							sljb: sljb.length > 0 ? sljb.join(',') : '',
							title: this.title,
							content: this.content,
							license: licenselist.join(','),
							cardid: this.cardid,
							sex: parseInt(this.sex),
							shengri: this.shengri,
							province: this.province,
							city: this.city,
							county: this.county,
							qianming: this.signature,
							kefu: this.kefu
						}).then(res => {
							uni.hideLoading()
							if (res.data.code == 0) {
								uni.showModal({
									title: '已提交认证',
									content: '请等待审核',
									success: () => {
										uni.navigateBack()
									}
								})
							} else {
								this.submitflag = false
								uni.showModal({
									title: '提交失败',
									content: res.data.msg
								})
							}
						})
					} else {

					}
				}

			},
			sendImg(url) {
				return new Promise(resolve => {
					this.$req.uploadImg(url).then(res => {
						resolve(res.data.data)
					})
				})
			},
			chooseRegion(e) {
				this.province = e.detail.value[0]
				this.city = e.detail.value[1]
				this.county = e.detail.value[2]
			},
			deletImg(index) {
				this.license.splice(index, 1)
			},
			addZs() {
				uni.chooseImage({
					success: (res) => {
						this.license = this.license.concat(res.tempFilePaths)
					}
				})
			},
			addTx() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.logo = res.tempFilePaths[0]
					}
				})
			},
			chooseJigou(v) {
				this.jigou = v
				this.jigouflag = false
			},
			searchJigou() {
				this.jigousearch = true
				this.jigouList = []
				this.pageNo = 1
				this.getJiGou()
			},
			loadJiGou() {
				if (this.jigouList.length < this.jigoutotal) {
					this.pageNo++
					this.getJiGou()
				}
			},
			getJiGou() {
				this.$req.post('/doctor/hospitals', {
					pageNo: this.pageNo,
					pageSize: 20,
					name: this.jigousearch ? this.jigouname : ''
				}).then(res => {
					this.jigouList = this.jigouList.concat(res.data.data.data)
					this.jigoutotal = res.data.data.totalCount
				})
			},
			chooseTag(res, index) {
				if (this.curtagList.length < 21) {
					res.select = true
					this.$set(this.seltagList.List, index, res)
					this.curtagList.push(res)
				} else {
					uni.showToast({
						title: '最多可选择20个标签',
						icon: 'none'
					})
				}
			},
			deletTag(res) {
				res.select = false
				this.seltagList.List.forEach((v, index) => {
					if (v.id == res.id) {
						this.$set(this.seltagList.List, index, res)
					}
				})
				this.curtagList.forEach((v, index) => {
					if (v.id == res.id) {
						this.curtagList.splice(index, 1)
					}
				})
			},
			getTag() {
				this.$req.post('/doctor/biaoqians').then(res => {
					this.tagList = res.data.data
				})
			},
			//添加擅长疾病
			addScjb() {
				uni.navigateTo({
					url: '/packageA/reg/jibing?list=' + JSON.stringify(this.curtagList)
				})
				// if (this.keshi == '') {
				//     uni.showToast({
				//         title: '请选择科室',
				//         icon: 'none'
				//     })
				// } else {
				//     this.tagflag = true
				// }
			},
			handleJigouChange(e) {
				this.jigou = this.jigouList[e.detail.value]
			},

			handleKeshiChange(e) {
				this.keshi = this.keshiList[e.detail.value]
				this.curtagList = []
				let list = this.tagList.filter(res => {
					return res.id == this.keshi.id
				})
				list[0].List.forEach(res => {
					res.select = false
				})
				this.seltagList = list[0]
			},
			getKeShi() {
				this.$req.post('/doctor/keshis').then(res => {
					this.keshiList = res.data.data
				})
			},
			handleChange(e) {
				this.shengri = e.detail.value
			},
			getCode() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else {
					this.codeflag = true
					this.codeinterval = setInterval(() => {
						if (this.codenum > 0) {
							this.codenum--
						} else {
							clearInterval(this.codeinterval)
							this.codeflag = false
							this.codenum = 60
						}
					}, 1000)
					this.$req.post('/doctor/phonecode', {
						phone: this.phone
					}).then(res => {
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.one-info {
		width: 100%;
		padding: 32rpx 32rpx;
		background: #fff;
		border-bottom: #F5F7F9 solid 1px;
		font-size: 26rpx;

		.info-title {
			font-weight: bold;
			font-size: 26rpx;
			color: #202020;
			width: 170rpx;
			margin-right: 20rpx;
		}



		.info-input {
			width: calc(100% - 190rpx);
			text-align: left;
			font-size: 26rpx;
		}

		.code-box {
			width: calc(100% - 190rpx);
		}

		.code-input {
			text-align: left;
			font-size: 26rpx;
			width: 200rpx;
		}

		.code-btn {
			font-weight: bold;
		}
	}

	.info-box {
		margin-top: 20rpx;
	}

	.add-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
	}

	.add-img-box {
		width: 140rpx;
		height: 140rpx;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		.delet-img {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			background: #fff;
			border-radius: 100rpx;
		}
	}

	.tag-list {
		height: 90vh;

		.tag-title {
			width: 100%;
			font-weight: bold;
			font-size: 32rpx;
			color: #202020;
			font-family: PingFang SC;
			margin-top: 32rpx;
		}

		.q-title {
			width: 100%;
			font-weight: bold;
			font-size: 28rpx;
			color: #202020;
			font-family: PingFang SC;
			line-height: 40rpx;
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			margin-top: 40rpx;

			text {
				color: #9b9ea0;
				font-size: 26rpx;
			}
		}

		.q-title>view:nth-child(1) {
			position: relative;
			z-index: 4;
		}

		.q-line {
			background: linear-gradient(to right, #00b6b2, rgba(#00b6b2, 0));
			width: 70rpx;
			height: 15rpx;
			margin-top: -15rpx;
		}

		.tag-list-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}

	.jb-list {
		width: calc(100% - 190rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.one-tag,
	.sel-tag {
		border: #dadcdc solid 1px;
		color: #474747;
		font-size: 22rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		border-radius: 4rpx;
		padding: 4rpx 10rpx;
		line-height: 40rpx;
	}

	.sel-tag {
		border: #00b6b2 solid 1px;
		color: #202020;
		background: rgba(#bfdad9, .1);
	}

	.sel-tag-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #F5F8FB;
		padding-top: 20rpx;
	}

	.scjb-list {
		width: calc(100% - 190rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.one-jigou {
		padding: 24rpx 24rpx;

		.jg-img {
			width: 280rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
		}

		.jg-name {
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
		}

		.jg-area {
			font-weight: 400;
			font-size: 24rpx;
			color: #5F5F5F;
			margin-top: 40rpx;
			width: 100%;
		}
	}

	.search-box {
		padding: 32rpx 36rpx;
		background: #fff;

		.search-info {
			width: 100%;
			height: 70rpx;
			border: #00b6b2 solid 1px;
			border-radius: 100rpx;
			padding-left: 20rpx;

			input {
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}

		.search-btn {
			width: 110rpx;
			height: 50rpx;
			background: linear-gradient(to right, #01a7a1, #5acbc1);
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #fff;
			margin-right: 10rpx;
		}
	}



	.img-list {
		width: calc(100% - 190rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.grey-btn {
		background: #dee3e7;
	}

	.no-search {
		width: 100%;
		font-size: 28rpx;
		margin: 40rpx 0;
	}

	.radio-box {
		margin: 20rpx 0;
		font-size: 24rpx;
	}
</style>
<style>
	.reg-pl {
		color: #939BA7;
	}
</style>